import React,{Component} from "react"
import "./play.css"
import {getList2} from "../../api/api"
import "./icon/iconfont.css"
import Sound from "./sound.js"
let newId

class Geci extends Component{
	constructor(props){
		super(props)
		this.state={
			data:[],
			id:this.props.num,
			arr2:[]
		}
	}
	UNSAFE_componentWillReceiveProps(nextProps){
		let {num}=nextProps
		let arr2=[]
		getList2(num)
		     .then(res =>{
				 var geci = document.querySelector(".geci");
				 if(!res.data.lrc.lyric){
					 geci.style.display='none'
				 }
				 geci.style.display='block'
				 let arr= res.data.lrc.lyric.split(/[\n]/)
				 let arr1=[]
				 for(let i=0;i<arr.length;i++){
				 	let str= arr[i].split(']')
				 	let str1=str[0].split('[')
					if(str[1]){
						let str2=str1[1].split(':')
						let num=parseInt(str2[0])*60+Number(Number(str2[1]).toFixed(1))
						let obj={
							time:num,
							str:str[1]
						}
						arr1.push(obj)
					}
				 }
				 arr2=arr1
				 this.setState({
						data:arr1
			})
		})
	}
	componentDidMount(){
		document.scrollingElement.scrollTop=0
		
		var audio = document.getElementById("audio");
		var control = document.getElementById("control");
		var gcbox = document.querySelector(".gcbox");
		let that=this
		setInterval(function(){
			let num=Number(audio.currentTime.toFixed(1))
			if(control.className==='pause'){
				if(!that.state.data.length){
					return
				}
				for(let i=0;i<that.state.data.length;i++){
					if(num===that.state.data[i].time){
						let count=0
						let a=setInterval(function(){
							count++
							document.scrollingElement.scrollTop=document.scrollingElement.scrollTop+10
						if(document.scrollingElement.scrollTop>=gcbox.children[i].offsetTop-330){
							clearTimeout(a)
						}
						if(count===5){							
								clearTimeout(a)
							}
						},100)
						for(let i=0;i<gcbox.children.length;i++){
							gcbox.children[i].className=''
						}
						document.scrollingElement.scrollTop=gcbox.children[i].offsetTop-330
						gcbox.children[i].className='ing'
					}
				}
			}
		},100)
	}
	render(){
			return (
				<div className="geci">
					<Sound/>
					<div className='gcbox'>
						{this.state.data.map((item,id)=>{
							return (				
								<p key={id}>{item.str}</p>
							)
						})}
					</div>
				</div>
			)
	}
}
export default Geci